<!DOCTYPE html>
<html lang="en">
<head>

    <style class="cp-pen-styles">.arrow {
        margin: 25px;
        display: inline-block;
        height: 12px;
        position: relative;
        width: 12px;
    }
    .arrow::after {
        border-bottom-style: solid;
        border-bottom-width: 2px;
        border-right-style: solid;
        border-right-width: 2px;
        content: '';
        display: inline-block;
        height: 12px;
        left: 0;
        position: absolute;
        top: 0;
        width: 12px;
    }
    .arrow.is-triangle::after {
        border-style: solid;
        border-width: 0 0 12px 12px;
        height: 0;
        width: 0;
    }
    .arrow.is-check::after {
        width: 6px;
    }
    .arrow.arrow-bar::before {
        bottom: 1px;
        content: '';
        height: 20px;
        position: absolute;
        right: 0;
        transform-origin: bottom;
        width: 2px;
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    .arrow.is-top {
        -moz-transform: rotate(225deg);
        -ms-transform: rotate(225deg);
        -webkit-transform: rotate(225deg);
        transform: rotate(225deg);
    }
    .arrow.is-right {
        -moz-transform: rotate(315deg);
        -ms-transform: rotate(315deg);
        -webkit-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    .arrow.is-bottom {
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .arrow.is-left {
        -moz-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }
    .arrow::after,
    .arrow .arrow::after {
        border-color: red;
    }
    .arrow.is-triangle::after,
    .arrow .arrow.is-triangle::after {
        border-color: transparent;
        border-bottom-color: red;
    }
    .arrow::before,
    .arrow .arrow::before {
        background-color: red;
    }
    </style></head><body>


<title>Example</title>


<span class="arrow arrow-bar is-top"></span>
<span class="arrow arrow-bar is-right"></span>
<span class="arrow arrow-bar is-bottom"></span>
<span class="arrow arrow-bar is-left"></span>
<span class="arrow is-top"></span>
<span class="arrow is-right"></span>
<span class="arrow is-bottom"></span>
<span class="arrow is-left"></span>
<span class="arrow is-triangle arrow-bar is-top"></span>
<span class="arrow is-triangle arrow-bar is-right"></span>
<span class="arrow is-triangle arrow-bar is-bottom"></span>
<span class="arrow is-triangle arrow-bar is-left"></span>
<span class="arrow is-triangle is-top"></span>
<span class="arrow is-triangle is-right"></span>
<span class="arrow is-triangle is-bottom"></span>
<span class="arrow is-triangle is-left"></span>
<span class="arrow is-check is-bottom"></span>



</body>
</html>